import React, { Fragment } from 'react';
import { connect } from 'dva';
import BasePage from './BasePage'
import CurrentLocation from '../components/currentLocation'
import breadArr from '../constant/breadArr'
import { Result, Button, Form, Modal, Input } from 'antd'
import AdministratorsTable from '../components/table/administratorsTable'

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};

const tailLayout = {
    wrapperCol: { offset: 6, span: 16 },
};

class AdministratorsManagementPage extends React.Component {
    constructor(props) {
        super(props),
            this.state = {
                visiable: false
            }
    }

    showModal = () => {
        this.setState({
            visiable:true
        })
    }

    showOffModal = () => {
        this.setState({
            visiable:false
        })
    }

    onFinishAdd = values => {
        this.props.dispatch({
            type:"app/register",
            data:{
                ...values,
                password:"123456",
                userType:"3"
            }
        })

        this.setState({
            visiable:false
        })

        this.props.dispatch({
            type:"backstageManagement/getUserTableData"
        })
    }

    renderAdministratorsManagementPage = user => {
        if (user == {} || user.userName != "admin") {
            return (
                <Result
                    status="warning"
                    title="请先登录超级管理官账号！"
                >
                </Result>
            )
        }

        if (user.userName == "admin") {
            return (
                <Fragment>
                    <Button style={{marginLeft:760}} type="primary" onClick={this.showModal}>添加账号</Button>
                    <div style={{ marginTop: 30, width: 850 }}><AdministratorsTable></AdministratorsTable></div>
                    <Modal
                        title='添加管理委员会账号'
                        visible={this.state.visiable}
                        onCancel={this.showOffModal}
                        footer={null}
                    >
                        <Form
                            {...layout}
                            name="add"
                            onFinish={this.onFinishAdd}
                            onFinishFailed={this.onFinishFailedAdd}
                        >
                            <Form.Item
                                label="用户名"
                                name="userName"
                                rules={[{ required: true, message: '请输入用户名!' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="昵称"
                                name="nickName"
                                rules={[{ required: true, message: '请输入昵称!' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                添加
                            </Button>
                        </Form.Item>
                        </Form>
                    </Modal>
                </Fragment>
            )
        }
    }

    render() {
        return (
            <BasePage>
                <CurrentLocation breadArr={breadArr.AdministratorsManagementPage}></CurrentLocation>
                {this.renderAdministratorsManagementPage(this.props.user)}
            </BasePage>
        )
    }
}

const mapStateToProps = state => {
    let user = state.app.user
    return {
        user
    }
}

export default connect(mapStateToProps)(AdministratorsManagementPage)